<template>
    <div>
        <h3>公告添加</h3>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    
                    <td>标题</td>
                    <td>
                        <input type="text" v-model="tian.gname">
                    </td>
                </tr>
                <tr>
                    <td>公告内容</td>
                    <td>
                        <textarea v-model="tian.neirong"></textarea>
                    </td>
                </tr>
                <tr>
                    <td>公告照片</td>
                    <td>
                        <input type="file" @change="img">
                        <img :src="tian.tu" width="100" height="100" alt="" v-if="tian.tu !=''">
                    </td>
                </tr>
                <tr>
                    <td>状态</td>
                    <td>
                        <input type="radio" :value="1" name="test" v-model="tian.steat">显示
                        <input type="radio" :value="0" name="test" v-model="tian.steat">隐藏
                     </td>
                    </tr>
                <tr>
                    <td>类型</td>
                    <td>
                        <select v-model="tian.leix">
                            <option value="">请选择</option>
                            <option :value="item.id" v-for="item in data1.list">{{ item.xname }}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="添加" class="btn btn-primary" @click="ok">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive, onMounted} from 'vue'
import axios from 'axios';
import {useRoute,useRouter} from 'vue-router'
const route=useRoute();
const router=useRouter();

let tian:any=reactive({
    gname:'',
    leix: '',
    neirong: '',
    tu: '',
    steat: '',
    shij: '',
    fabur:'',
})
//上传图片
const img=(e:any)=>{
    let obj=e.target.files[0];
    let f=new FormData();
    f.append('file',obj);
    axios({
        url:'/api/Img/tu',
        method:'post',
        data:f
    })
    .then((res)=>{
        console.log(res);
        tian.tu=res.data;
    })
    .catch((err)=>{
        console.log(err);
    })
}
//下拉框
const data1:any=reactive({
    list:[]
})
onMounted(()=>{
    getlist1();
})
const getlist1=()=>{
    axios({

        url:'/api/gong/xshow',
        method:'get',
    })
    .then((res)=>{
        console.log(res);
        data1.list=res.data;
    })
    .catch((err)=>{
        console.log(err);
    })
}
//添加
const ok=()=>{
    if(tian.gname=="")
{
    alert('标题不能为空');
    return;
}

if(tian.steat=="")
{
    alert('状态不能为空');
    return;
}
if(tian.leix=="")
{
    alert('类型不能为空');
    return;
}
    axios({
        url:'/api/gong/gadd',
        method:'post',
        data:tian
    })

    .then((res)=>{
        console.log(res);
        if(res.data>0)
    {

        alert('添加成功');
        router.push('/Gshow');
    }
    else

    {
        alert('删除失败');
        return;
    }
    })
    .catch((err)=>{
        console.log(err);
    })
}
</script>

<style scoped>

</style>